<template>
  <div class="main">
    <div class="header" >
      <div class="left">
        <div class="back-icon">
          <span class="iconfont icon-fanhuijiantou"></span>
        </div>
        <div class="hearder-title">{{info.stuName}}的请销假</div>
      </div>
      <div class="right">
        <div class="x-icon">
          <span class="iconfont icon-cuowuguanbiquxiao"></span>
        </div>
        <div class="menu-icon">
          <span class="iconfont icon-yuandiancaidan"></span>
        </div>
      </div>
    </div>
    <div class="top">
      <h2>{{info.stuName}}的请销假</h2>
    </div>
    <div class="top-img">
        <img src="../../../public/static/img/test2.png" style="height:80px;right:17px;position: fixed;top:43px" alt="">
    </div>
    <div class="applicant">
      <div class="applicant-title">
        <div class="strip"></div>
        <div class="title">申请人</div>
      </div>
      <div
          :class="nameState ? 'applicant-wrapper' : 'applicant-wrapper-two'"
          @click="changestate"
      >
        <div class="applicant-top">
          <div class="name">姓名</div>
          <div class="real-name">
            <span></span>
            <span >{{foldName}}</span>
          </div>
          <dir class="phone-icon">
            <a :href="'tel:'+info.myNo"><span class="iconfont icon-iconphone01"></span></a>
          </dir>
          <div class="down-top">
                <span
                    :class="nameState ? 'down' : 'up'"
                    class="iconfont icon-jiantou_liebiaozhankai_o"
                ></span>
          </div>
        </div>
        <div class="applicant-top">
          <div class="name">学号</div>
          <div class="real-name">{{info.stuNo}}</div>
        </div>
        <div class="applicant-top">
          <div class="name">性别</div>
          <div class="real-name">{{info.radio=1 ? '男' : '女'}}</div>
        </div>
        <div class="applicant-top">
          <div class="name">系</div>
          <div class="real-name"></div>
        </div>
        <div class="applicant-top">
          <div class="name">专业</div>
          <div class="real-name">{{info.stuMajor}}</div>
        </div>
        <div class="applicant-top">
          <div class="name">专业方向</div>
          <div class="real-name"></div>
        </div>
        <div class="applicant-top">
          <div class="name">班级</div>
          <div class="real-name">{{info.stuClass}}</div>
        </div>
        <div class="applicant-top">
          <div class="name">年级</div>
          <div class="real-name">{{info.stuGrade}}</div>
        </div>
        <div class="applicant-top">
          <div class="name">教育层级</div>
          <div class="real-name">本科</div>
        </div>
        <div class="applicant-top">
          <div class="name">学制</div>
          <div class="real-name">4.0</div>
        </div>
      </div>
    </div>
<!--    <div class="leave-information">-->
<!--      <div class="applicant-title">-->
<!--        <div class="strip"></div>-->
<!--        <div class="title">请假信息</div>-->
<!--      </div>-->
<!--      <div class="applicant-top">-->
<!--        <div class="name">是否补假</div>-->
<!--        <div class="real-name">是</div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="application-content">
    <div class="applicant-title">
      <div class="strip"></div>
      <div class="title">申请内容</div>
    </div>
    <div class="applicant-name">
      <div class="name">审批编号</div>
      <div class="real-name">32859264495649</div>
    </div>
    <div class="applicant-name">
      <div class="name">是否离遵</div>
      <div class="real-name">否</div>
    </div>
    <div class="applicant-name">
      <div class="name">目的地</div>
      <div class="real-name">{{info.destination}}</div>
    </div>
      <div class="applicant-name">
        <div class="name">请假类型</div>
        <div class="real-name">{{info.value}}</div>
      </div>
    <div class="applicant-name">
      <div class="name">请假原因</div>
      <div class="real-name">{{info.leaveSeason}}</div>
    </div>
    <div class="applicant-name">
      <div class="name">开始时间</div>
      <div class="real-name">{{info.startTime}}</div>
    </div>
    <div class="applicant-name">
      <div class="name">结束时间</div>
      <div class="real-name">{{info.endTime}}</div>
    </div>
    <div class="applicant-name">
      <div class="name">时长</div>
      <div class="real-name">{{difTime}}</div>
    </div>
    <div class="applicant-name">
      <div class="name">身份证号</div>
      <div class="real-name">{{info.idCard}}</div>
    </div>
    <div class="applicant-name">
      <div class="name">本人联系电话</div>
      <div class="real-name">{{info.myNo}}</div>
    </div>
    <div class="applicant-name">
      <div class="name">家长姓名</div>
      <div class="real-name">{{info.parentName}}</div>
    </div>
    <div class="applicant-name">
      <div class="name">家长联系电话</div>
      <div class="real-name">{{info.parentNo}}</div>
    </div>
    <div class="applicant-name">
      <div class="name">班主任姓名</div>
      <div class="real-name">{{info.classTeacherName}}</div>
    </div>
    <div class="applicant-name">
      <div class="name">班主任联系电话</div>
      <div class="real-name">{{info.classTeacherNo}}</div>
    </div>
      <div class="applicant-name">
        <div class="name">本人承诺以上信息真实有效（签字）</div>
<!--        <div class="sign">-->
<!--          <vue-esign style="border: 1px black solid;margin-left: 10px" ref="esign" :width="170" :height="60" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />-->
<!--          <button @click="handleReset">清空画板</button>-->
<!--          <button @click="handleGenerate">生成图片</button>-->
<!--        </div>-->
        <img   class="sign-img"  :src="info.resultImg" @click="previewImg">
      </div>
    </div>
    <div class="footer">
      <div class="applicant-title">
        <div class="strip"></div>
        <div class="title">审批进度</div>
      </div>
      <div class="item-list">
        <div class="item-wrapper">
          <div class="item-no">1</div>
          <div class="item-content">{{info.classTeacherName}}(202009)</div>
        </div>
        <div class="approvaltime">{{this.formatDate()+'07:03'}}</div>
      </div>
      <div class="approval-comments">
        <span>已同意</span>
      </div>
      <div class="state">
        <span>通过</span>
      </div>
      <div class="line"></div>
      <div class="item-list">
        <div class="item-wrapper">
          <div class="item-no">2</div>
          <div class="item-content">{{info.leaderName}}(2010246)</div>
        </div>
        <div class="approvaltime">{{this.formatDate()+'07:21'}}</div>
      </div>
      <div class="approval-comments">
        <span>已同意</span>
      </div>
      <div class="state statetwo" >
        <div class="pass">通过</div>
        <div class="iconfont icon-tixing">&nbsp;已催办</div>
        <div class="state-time">{{this.formatDate()+'07:30'}}</div>
      </div>
      <div class="line"></div>
      <div class="transverse"></div>
    </div>
    <div class="form" style="position:fixed;bottom:0;background-color: white"  >转发审批表单</div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      jsonObj: {},
      info: {},
      lineWidth: 2,
      lineColor: '#000000',
      bgColor: 'rgba(255,255,255,0)', //白色透明背景
      resultImg: '',
      resultImgList: [""],
      isCrop: false,
      nameState: true,
      foldName:'',
      difTime:''
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm=>{
      // if(!to.params){
      //   var data = JSON.parse(window.localStorage.getItem('data'))
      //   vm.info = data;
      // }else{
      //    vm.info =to.params;
      // }
      vm.info=to.params;
      let s = vm.info.startTime.slice(-5);
      let e = vm.info.endTime.slice(-5);
      let start = (s[0]-'0')*10+(s[1]-'0')+((s[3]-'0')*10+(s[4]-'0'))/60;
      let end = (e[0]-'0')*10+(e[1]-'0')+((e[3]-'0')*10+(e[4]-'0'))/60;
      console.log(start);
      console.log(end);
      let  t = (end-start)/24;
      // console.log(t.toString().slice(0,4))
      vm.difTime =  t.toString().slice(0,4);
    })
  },
  methods:{

    formatDate() {
      let date = new Date();
      let YY = date.getFullYear() + '-';
      let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
      return YY + MM + DD +" ";
    },
    changestate() {
      this.nameState = !this.nameState;
      // console.log(this.nameState)
      if(this.nameState) {
        this.foldName = this.info.stuName + '(' + this.info.stuNo + ')';
      }
      else{
        this.foldName=this.info.stuName
      }
    },
    previewImg () {
      this.$hevueImgPreview(this.info.resultImg)
    },

    handleReset () {
      this.$refs['esign'].reset() //清空画布
    },
    handleGenerate () {
      this.$refs['esign'].generate().then(res => {
        this.resultImg = res // 得到了签字生成的base64图片
        this.resultImgList[0]=res
        console.log(this.resultImg);
        document.querySelector('.sign').remove();
        document.querySelector('.sign-img').style.visibility='visible';
      })
    },
    
  },

  mounted() {
    this.foldName = this.info.stuName + '(' + this.info.stuNo + ')';
	document.documentElement.scrollTop=0;
  }
};
//  window.addEventListener("beforeunload",()=>{
//         localStorage.setItem("userMsg",JSON.stringify(this.info))
//     })
</script>

<style >
.main {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.top-img {
    position: absolute;
    margin-left: 355px;
    margin-top: -33px;
}
.header {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #6cb0f9;
  color: #fff;
  position: fixed;
}
.left, .right {
    display: flex;
    flex-direction: row;
}
/* .left {
    
} */
.icon-fanhuijiantou {
    font-size: 25px;
    margin-left: 20px;
}
.hearder-title {
    margin: 5px 0 0 20px;
}
.menu-icon {
    margin-top: 2px;
}
.icon-cuowuguanbiquxiao {
    margin: 10px 20px ;
    font-size: 30px;
}
.icon-yuandiancaidan {
    margin: 2px 10px;
    font-size: 25px;
}
.top {
  width: 100%;
  height: 30px;
  text-align: center;
  margin-top: 52px;

}
.applicant-title {
  background: #eee;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.strip {
  margin-left: 10px;
  height: 15px;
  width: 5px;
  background: #52adfc;
}
.applicant-wrapper {
    height: 40px;
    overflow: hidden;
    transition: height 0.5s;
}
.applicant-wrapper-two {
    transition: height 0.5s;
    overflow: hidden;
    height: 400px;
}
.title {
  margin-left: 5px;
}
.applicant-top {
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.stu-mber {
  display: none;
}
.phone-icon {
  text-align: left;
  margin-left: -38px;
}
.icon-iconphone01 {
  float: left;
  font-size: 18px;
  background: #fff;
  color: #52adfc;
  font-weight: 900;
  border-radius: 50%;
  border: 2px solid #52adfc;
}
.down-top {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  float: right;
}
.icon-jiantou_liebiaozhankai_o {
  font-size: 40px;
  color: #999;
  margin-right: 10px;
}
.down {
      -webkit-transition: transform .25s linear;
      -moz-transition: transform .25s linear;
      -o-transition: transform .25s linear;
      transition: transform .25s linear;
}
.up {
  transform: rotate(180deg);
      -webkit-transition: transform .25s linear;
      -moz-transition: transform .25s linear;
      -o-transition: transform .25s linear;
      transition: transform .25s linear;
}
.applicant-name {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}
.name {
  text-align: right;
  color: #999;
  width: 80px;
  margin-left: 16px;
}
.real-name {
  margin-left: 10px;
}
.footer {
  margin-bottom: 50px;
  margin-top: 20px;
  position: relative;
}
.item-list {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.item-wrapper {
  display: flex;
  align-items: flex-start;
}
.item-list .item-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #88d062;
  border-radius: 50%;
  color: #fff;
  margin-left: 20px;
}
.item-content {
  margin-left: 10px;
}
.approvaltime {
  margin-right: 10px;
  color: #999;
}
.approval-comments {
  color: #88d062;
  margin-left: 50px;
  margin-top: 10px;
}
/* .footer {
    position: relative;
} */
.state {
  margin-left: 34px;
  color: #88d062;
  font-size: 14px;
  margin-top: 20px;
  position: relative;
}
.statetwo {
  display: flex;
  flex-direction: row;
}
.state-time {
  margin-left: 10px;
}
.line {
  height: 76px;
  width: 1px;
  background: #88d062;
  margin-top: -58px;
  margin-left: 29px;
  position: absolute;
}
.icon-tixing {
  text-align: center;
  /* position: absolute; */
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 75px;
  background: #e5e5e5;
  color: #f8f8f8;
  height: 26px;
  padding-left: 2px;
  margin-top: -6px;
  margin-left: 10px;
  border-radius: 5px;
}
.transverse {
  width: 20px;
  height: 1px;
  background: #999;
  margin-top: 20px;
  margin-left: 20px;
}
.form {
  margin-top: 20px;
  border-top: 2px solid #999;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 100%;
  color: #52adfc;
  font-weight: 500;
  /*margin-bottom: 20px;*/

}

</style>